<template>
	<view class="container-search">
		<view class="search-top">
			<view class="search-view">
				<view class="search-input">
					<uni-easyinput prefixIcon="search" clearable v-model="values" @input="handleKeyUp" :placeholder="$t('搜索')" @iconClick="iconClick">
					</uni-easyinput>
				</view>
				<view class="search-cancel" @click="gotoBack">
					{{$t('取消')}}
				</view>
			</view>				
		</view>
		<view class="search-his">
			<view class="search-his-view">
				<view class="search-his-text">
					{{$t('搜索历史')}}
				</view>
				<view class="search-his-icon">
					<uni-icons v-show="historyList.length>0" type="trash" size="22" @click="clearHis"></uni-icons>
				</view>
			</view>
			<view class="search-his-tag">
				<p v-for="(item,index) in historyList" @click="sousuo(item)" :keys="item.index">{{item}}</p>
				
			</view>
		</view>
		<view class="">
			<view v-if="codeList.length==0" class="nodetaView">
				<image src="../../static/home/nodeta.png" class="nodetaImg"></image>
				<p class="nodetaText">{{$t('暂无数据')}}</p>
			</view>
			<view v-else class="list-view" v-for="(item,index) in codeList" :keys="index">
				<p class="pro-title"> {{item.title}} </p>
				<view class="pro-center">
					<view class="percenter25">
						<p class="pro-interest"><span>{{item.rate}}</span>(Rs)</p>
						<p class="pro-interesttext">{{$t('日利')}}</p>
					</view>
					<view class="percenter25">
						<p class="pro-cycle"><span>{{item.day}}</span>天</p>
						<p class="pro-cycletext">{{$t('投资周期')}}</p>
					</view>
					<view class="percenter25">
						<p class="pro-amount">$<span>{{item.min}}</span></p>
						<p class="pro-amounttext">{{$t('起投金额')}}</p>
					</view>
				</view>
				<view class="pro-scale">
					{{$t('项目规模')}}:$<span>{{item.money}}</span>(Rs)
				</view>
				<view class="progressView">
					<view class="progress-box">
						<progress :percent="item.jd" show-info stroke-width="3" />
						
					</view>
					<view class="invest-view" @click="investBtn(item)">
						<p class="invest-btn">{{$t('立即投资')}}</p>
					</view>
				</view>
			</view>
		</view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @change="change">
				<view class="popup-content" type="center">
					<view class="">
						<p class="pop-title"> {{acdata.title}} </p>
						<view class="pro-center">
							<view class="percenter25">
								<p class="pro-interest"><span>{{acdata.rate}}</span>(Rs)</p>
								<p class="pro-interesttext">{{$t('日利')}}</p>
							</view>
							<view class="percenter25">
								<p class="pro-cycle"><span>{{acdata.day}}</span>{{$t('天')}}</p>
								<p class="pro-cycletext">{{$t('投资周期')}}</p>
							</view>
							<view class="percenter25">
								<p class="pro-amount">$<span>{{acdata.min}}</span></p>
								<p class="pro-amounttext">{{$t('起投金额')}}</p>
							</view>
						</view>
						<p class="van-field">
							<input type="text" inputmode="decimal" v-model="num" :placeholder="$t('请输入投资金额')" class="van-field__control">
						</p>
						<view class="btn-bottom">
							<view class="btn-cancel" @click="cancel">
								{{$t('取消')}}
							</view>
							<view class="btn-sure" @click="sureBtn">
								{{$t('确定')}}
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				values:'',
				historyList:[],
				codeList:[],
				acdata:{},
				num:""
			}
		},
		onShow() {
			//缓存搜索历史
			let arr = uni.getStorageSync('search_hy')
			this.historyList = arr
		},
		methods: {
			// 投资
			order(id,num){
				this.$http.post(
					'api/order/create',//接口名
					{id:id,num:num},//参数合集
				).then(res=>{
					this.cancel()
					uni.showToast({
						icon: 'success',
						title: res.msg
					});
					this.num = ""
					this.acdata = {}
				},(err)=>{//失败的操作
					uni.showToast({
						icon: 'error',
						title: err.data.message
					});
				})
			},
			searchCode(title){
				this.$http.post(
					'api/touzi/index',//接口名
					{title:title}//参数合集
				).then(res=>{
					this.codeList = res.data.data
				},(err)=>{//失败的操作
					uni.showToast({
						icon: 'none',
						title: err.data.message
					});
				})
				
			},
			gotoBack(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			clearHis(){
				this.historyList=[];
				this.codeList=[];
				uni.setStorageSync('search_hy',this.historyList)
			},
			investBtn(data){
				this.$refs.popup.open('center')
				this.acdata = data
			},
			// 弹窗取消
			cancel(){
				this.$refs.popup.close();
			},
			// 弹窗确定
			sureBtn(){
				this.order(this.acdata.id,this.num)
			},
			change(){
				
			},
			sousuo(str){
				this.values = str
				this.searchCode(str)
			},
			//输入事件
			handleKeyUp(event) {
				if(this.values != ''){
					//缓存搜索历史
					let arr = uni.getStorageSync('search_hy')
					if(arr){
						arr.unshift(this.values)
					}else{
						arr = new Array(this.values)
					}
					uni.setStorageSync('search_hy',arr)
					this.historyList = arr
					this.searchCode(this.values)
				}
				// else{
					
				// }
			},
		}
	}
</script>

<style scoped>
	.btn-cancel,.btn-sure{
		width:50%;
		height:96rpx;
		line-height: 96rpx;
	}
	.btn-sure{
		color:red;
	}
	.btn-bottom{
		display: flex;
		justify-content: space-between;
		align-items:center;
		text-align: center;
	}
	.container-search {
		background-color: #f6f6f6;
	}
	.search-top{
		background-color: #fff;
		height:88rpx;
		line-height: 88rpx;
	}
	.search-view{
		display: flex;
	}
	.search-input{
		width:80%;
	}
	/deep/.is-input-border {
		width:96%;
		height:29px;
		line-height: 29px;
		background-color: #f6f6f6;
		border-radius: 17px;
		margin-top: 8px;
		margin-left: 16px;
		border-color: rgb(229, 229, 229);
		background-color: rgb(229, 229, 229);
		outline: none;
	}
	.search-cancel{
		width:15%;
		margin-left:5%;
		font-size: 26rpx;
	}
	
	.search-his{
		padding: 38rpx 34rpx;
	}
	.search-his-view{
		display: flex;
		
	}
	.search-his-icon{
		
		
	}
	.search-his-text{
		flex:1;
		font-size: 28rpx;
		font-weight: 700;
	}
	.search-his-tag{
		display: flex;
	}
	.search-his-tag p{
		padding: 0 14rpx;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 20rpx;
		background-color: #dedede;
		font-size: 24rpx;
		color: rgba(0, 0, 0, .8);
		margin-right: 24rpx;
		margin-bottom: 24rpx;
	}
	.pro-title{
		border-bottom: 1px solid #ececec;
		padding: 15px 10px;
		margin: 5px 0;
		font-size: 24rpx;
		font-weight:600;
	}
	.pro-center{
		display: flex;
		flex-direction: row;
		text-align: center;
		margin:10rpx;
	}
	.percenter25{
		width:33.33%;
		font-size:28rpx;
	}
	.pro-interest{
		color:red;
		font-weight:600;
		padding:10rpx 0;
	}
	.pro-cycle,.pro-amount{
		font-weight:600;
	}
	.pro-interesttext,.pro-cycle,.pro-cycletext,.pro-amount,.pro-amounttext{
		padding:10rpx 0;
	}
	.pro-scale{
		padding:10rpx 20rpx;
		margin:10rpx 0;
		color:#999;
		font-size:24rpx;
	}
	.progressView{
		display: flex;
		flex-direction: row;
		padding:10rpx 20rpx;
		margin:10rpx 0;
	}
	.progress-box{
		width:70%;
		height:74rpx;
		line-height: 74rpx;
	}
	.invest-view{
		width:20%;
		
		margin: 10rpx 0;
		margin-left:10%;
	}
	.invest-btn{
		color: #0a5;
		padding: 10rpx 10rpx ;
		border-radius: 10rpx ;
		border: 1px solid #0a5;
		font-size: 24rpx;
		
	}
	.list-view{
		background-color: #fff;
		margin-left:20rpx;
		margin-right:20rpx;
		border-radius: 4rpx;
	}
	.pop-title{
		border-bottom: 1px solid #ececec;
		padding: 30rpx 20rpx;
		margin: 10rpx 0;
		font-size: 32rpx;
		font-weight: 700;
	}
	/deep/.uni-popup__wrapper{
		font-size: 32rpx;
		background-color: #fff;
		border-radius: 32rpx;
		width:90%;
		margin:0 5%;
	}
	.van-field__control {
	    display: block;
	    box-sizing: border-box;
	    width: 100%;
	    min-width: 0;
	    margin: 0;
	    padding: 0;
	    color: #323233;
	    line-height: inherit;
	    text-align: left;
	    background-color: transparent;
	    border: 0;
	    resize: none;
		color: #323233;
		text-align: left;
		font-size: 28rpx;
	}
	.van-field{
		padding: 20rpx;
	}
	.nodetaView{
		text-align: center;
		background-color: #f6f6f6;
		padding:64rpx 0;
	}
	.nodetaImg{
		width:320rpx;
		height:320rpx;
	}
	.nodetaText{
		font-size:28rpx;
		color:#969799;
	}
</style>
